<template>
  <div>
      <div class="clear goods" v-for="goods in getCartGoods">
        <div class="left _goodsImg"><img class="goodsImg" :src="`http://127.0.0.1:3000/${goods.thumb[0].filename}`" width="100%" /></div>
        <div class="left _content cartCon">
          <p class="goodsTilte cartGoodsTitle">{{goods.title}}</p>
          <p class="brand">单价：{{goods._price}}<e class="right">X{{goods.number}}</e></p>
        </div>
      </div>
      <div class="clear cartFoot">
        <div>
          <span class="left">总计：{{allPrice}}元</span>
          <mt-button class="right" type="danger">结算</mt-button>
        </div>
      </div>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {mapActions} from "vuex";
    import {formatDateTime} from '../date';

    export default{
        data(){
          return {
            allPrice:0,
          }
        },
        computed:{
          ...mapGetters(["getCartGoods"])
        },
        created(){
          this.getCartGoods.map((val,ind) => {
            this.allPrice += val._price*val.number;
          })
          console.log(this.allPrice)
        },
        updated(){

        }
    }
</script>

<style >
  .cartGoodsTitle{
    margin-bottom:2.3rem;
  }
  .cartCon{
    padding-bottom:1.1rem !important;
    width:57%;
    margin-left:3%;
    border-bottom:1px solid #ccc
  }
  .cartFoot{
    height: 3rem;
    position: relative;
    width: 100%;
    line-height: 3rem;
  }
  .cartFoot>div{
    position: fixed;
    width: 100%;
    bottom: 4rem;
    background:white;
  }
  .cartFoot span{
    padding:0 1rem
  }
</style>

